<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Doctor</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="css/basic.css">
    <link rel="stylesheet" href="css/personalInfo.css">
    <link rel="stylesheet" href="css/doctor.css">
    <!-- 引入axios -->
    <script src="https://unpkg.com/axios/dist/axios.js"></script>
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入elementui -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入组件 -->
    <script src="js/personalInfo.js"></script>
</head>

<body>
    <div class="app">
        <personalinfo></personalinfo>
        <div class="main">
            <div class="above">
                <section class="patient">
                    <header>           
                    <span style="float: left">我的患者</span>
                    <span style="float: right;margin-right: 60px;">
                        <el-button @click="refresh" circle icon="el-icon-refresh-right" size="mini"></el-button>
                    </span>
                    </header>
                    <div>
                        <el-table :data="myPatients" border style="width: 100%;font-size: 16px;" height="100%" v-if="patientOk">
                            <el-table-column prop="id" label="id" width="60">
                            </el-table-column>
                            <el-table-column prop="username" label="姓名" width="100">
                            </el-table-column>
                            <el-table-column prop="gender" label="性别" width="60">
                            </el-table-column>
                            <el-table-column prop="age" label="年龄" width="60">
                            </el-table-column>
                            <el-table-column prop="email" label="邮箱" >
                            </el-table-column>
                            <el-table-column prop="status" label="开处方" width="120">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="primary"
                                    @click="prescribe(scope.row.id)">
                                         开处方 
                                        <!-- {{scope.row.id}} -->
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>

                </section>
            </div>


            <div class="below">


                <section class="notification">
                    <header>通知</header>
                    <div>
                    <ul>
                        <li class="notice" @click="location(item.patientId)" v-for="(item,index) in notices" >
                            <span>{{item.patientId}}号患者异常-{{item.description}}
                            </span>
                            <div>
                                <!-- 阻止冒泡事件 -->
                                <el-button @click.stop="deleteNotice(index)" circle icon="el-icon-delete" size="mini"></el-button>
                            </div>
                        </li>
                    </ul>
                    </div>
                </section>



                <section class="worktime">
                    <header>排班表</header>
                    <div>
                        <div class="weekday">
                            <div style="width:80px;height: 100%;">{{date}}</div>
                            <span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span><span>日</span>
                            <div style="width:17px;height: 100%;border-left: 1px salmon solid ;"></div>
                        </div> 
                        <div class="container">                         
                            <div class="oneday">
                                <div class="daytime">
                                    <p v-for="item in daytime">{{item}}</p>
                                </div>
                                <div class="weektime" v-for="item in weektime">
                                    <div v-for="dot in item.dots" :class='{work:dot==1}'></div>
                                </div>
                            </div>
                        </div>  
                    </div>   
                </section>
            </div>
        </div>



         <!-- 弹窗 -->
                <el-dialog
                title="开处方"
                :visible.sync="dialogVisible"
                width="50%">
                    <div class="medicine">
                        <el-table :data="medicineTable" border style="width: 100%;font-size: 16px;" height="100%" v-if="haveMedicine">
                            <el-table-column  label="选择" width="40">
                                <template slot-scope="scope">
                                    <el-checkbox v-model="scope.row.check"></el-checkbox>
                                </template>
                            </el-table-column>
                            <el-table-column prop="id" label="编号" width="60">
                            </el-table-column>
                            <el-table-column prop="name" label="姓名" width="120">
                            </el-table-column>
                            <el-table-column prop="description" label="描述" width="120">
                            </el-table-column>
                            <el-table-column  label="剂量" width="120">
                                <template slot-scope="scope">
                                    <el-input
                                      placeholder="1盒"
                                      v-model="scope.row.dosage"
                                      clearable>
                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column  label="叮嘱" >
                                <template slot-scope="scope">
                                    <el-input
                                      placeholder="一天三次，一次三片"
                                      v-model="scope.row.warn"
                                      clearable>
                                    </el-input>
                                </template>
                            </el-table-column>
                        </el-table>

                    </div>
                    <span slot="footer" class="dialog-footer" >
                      <el-button @click="dialogVisible=false">取 消</el-button>
                      <el-button type="primary" @click="prescribeSubmit">确 定</el-button>
                    </span>

               </el-dialog>



    </div>
    <script src="js/doctor.js"></script>



   


</body>

</html>

<script>

</script>